<template>
  <div>
    <el-dialog
  title="题库列表"
  width="65%"
  :visible="dialogVisible"
  @close="closeDialog"
  >
<div style="border-bottom: 1px solid;padding-bottom: 15px;">
  <el-row>
  <el-col :span="6">【题型】：{{lists.questionType | status}}</el-col>
  <el-col :span="6">【编号】：{{lists.id}}</el-col>
  <el-col :span="6">【难度】：{{lists.difficulty| difficult
}}</el-col>
  <el-col :span="6">【标签】:{{lists.tags}} </el-col>
</el-row>
<el-row style="margin-top: 20px;">
  <el-col :span="6">【学科】：{{lists.subjectName
}}</el-col>
  <el-col :span="6">【目录】：{{lists.directoryName}}</el-col>
  <el-col :span="12">【方向】：{{lists.direction}}</el-col>
</el-row>
</div>
<div style="border-bottom: 1px solid;padding-bottom: 15px;">
  <el-row style="margin-top: 20px;">
    <p>【题干】：</p>
  <el-col v-html="lists.question"></el-col>
  <span>选项：（以下选中的选项为正确答案）</span>
   <div v-if="lists.options&&lists.options.length>0&&lists.questionType==='1'">
    <p>  <el-radio v-model="radio" label="1">{{lists.options[0].title
}}</el-radio></p>
    <p>  <el-radio v-model="radio" label="2">{{lists.options[1].title}}</el-radio></p>
    <p>  <el-radio v-model="radio" label="3">{{lists.options[2].title}}</el-radio></p>
    <p>  <el-radio v-model="radio" label="4">{{lists.options[3].title}}</el-radio></p>
   </div>
   <div v-else-if="lists.options&&lists.options.length>0&&lists.questionType==='2'">
    <p> <el-checkbox v-model="checked1" >{{lists.options[0].title
}}</el-checkbox></p>
    <p> <el-checkbox v-model="checked2" >{{lists.options[1].title
}}</el-checkbox></p>
    <p> <el-checkbox v-model="checked3" >{{lists.options[2].title
}}</el-checkbox></p>
    <p> <el-checkbox v-model="checked4" >{{lists.options[3].title
}}</el-checkbox></p>
   </div>
   <div v-else-if="lists.options&&lists.options.length>0&&lists.questionType==='3'">
    <p>{{lists.question}}</p>
   </div>
</el-row>
</div>
<div style="border-bottom: 1px solid;padding-bottom: 15px;">
  <el-row style="margin-top: 20px;">
  <el-col>【参考答案】：<a href="#"><el-button type="danger" size="mini" v-if="true" @click="isshow=false">视频答案解析
  </el-button></a>
</el-col>
<video :src="lists.videoURL" v-if="!isshow&&lists.videoURL===''" width="400px" height="300px" autoplay="autoplay" controls="controls"></video>
</el-row>
</div>
<div style="border-bottom: 1px solid;padding-bottom: 15px;">
  <el-row style="margin-top: 20px;">
    <el-col :span="3">【答案解析】：</el-col>
    <el-col v-html="lists.answer"  :span="21"></el-col>
</el-row>
</div>
<el-row style="margin-top: 20px;">
  <el-col>【题目备注】：<span style="margin-left: 6px;">{{lists.remarks}}</span></el-col>
</el-row>
  <span slot="footer" class="dialog-footer">
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </el-row>
    
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PreviewPage',
data() {
  return {
    radio: '1',
    checked1: false,
    checked2: false,
    checked3: false,
    checked4: false,
    isshow:true
  }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default:false
    },
    lists: {
      type: Object,
      default:()=>({})
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:dialogVisible', false)
    }
}
}
</script>

<style>

</style>